<template>
  <div class="qui-list">
    <span class="list-tips">{{ tipsText }}</span>
    <component
      ref="refdemo"
      :is="currentView"
      @parentClickEvent="diyEvent"
      :msg="msg"
      class="small"
      keep-alive
    ></component>
    <!-- component为了渲染动态改变组件所自带的vue标签，由：is来进行动态组件选择 -->
    <!-- <qui-btn v-on:btnClickEvent="btnClickEvent" :msg=msg class="small"></qui-btn> -->
  </div>
</template>

<script>
import quiButton from "./QuiButton";
import quiArrow from "./quiArrow.vue";
export default {
  props: {
    msg: {
      default: "下载" //暴露给pageQuiList页面使用
    },
    tipsText: {
      default: "默认的文案"
    },
    currentView: {
      default: "qui-btn"
    },
    //   btnClickEvent: {/*方便每个子组件分配各自的触发事件*/
    //     type: Function,
    //     default: function () {
    //       alert(this.msg + '我是默认事件');
    //     }
    //   }
    href: {
      default: "#/"
    },
    // 定义暴露在父组件中的函数事件，另外可以使用代码方式定义事件
    diyEvent: {
      type: Function,
      default: function() {
        alert("我是quiList的diy事件");
        
      }
    }
  },
  components: {
    "qui-btn": quiButton,
    "qui-arrow": quiArrow
  },
  methods: {
    //   btnClickEvent: function () {
    //       alert("按钮点击事件")
    //     // this.btnClickEvent();
    //     // this.$emit('btnClickEvent');
    //   }
    clickEvent: function() {
      alert(this.msg);
      // this.currentView="btn-Arrow";
      this.$emit("btnClickEvent");
      this.$emit("parentClickEvent")//执行父组件的方法，可以用方法名或者具体方法名进行指定
    }
  },
  mounted() {
    // 通过代码方式自定义事件
    this.$refs.refdemo.$on('ttt', function() {
      alert("通过代码注册的refdemo.ttt事件可执行");
    });
    //this.$on是指整个结构出发执行的自定义事件
    this.$on("ttt2", function() {
      alert("ttt2无法执行");
    });
  }
};
</script>
<style scoped>
.qui-list {
  padding: 10px 0;
  margin-left: 10px;
  overflow: hidden;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30px;
}
.qui-list .qui-btn {
  float: right;
  margin-right: 10px;
}
.qui-list .list-tips {
  padding: 0 5px;
  color: #00a0d8;
  float: left;
  vertical-align: middle;
  flex: 1;
  text-align: left;
  font-size: 14px;
}
</style>
